<template>
	<view class="shop_cart">
		<view class="cart_nav">
			<view class="" @click="selectAllFn">
				<uni-icons type="checkbox" size="20" :color="selectAll?'red':''" v-show="!manage"></uni-icons>
				<text>{{!manage?'全部':''}}</text>
			</view>
			<text @click="edit_cart" style="color: rgb(226,96,31);">{{!manage?'删除':''}}</text>
			<text @click="manage=!manage">{{manage?'管理':'完成'}}</text>
		</view>
		<view class="cart_body">
			<view class="cart_list" v-for="(v,i) in cartData">
				<view class="list_data">
					<view class="list_icon" v-show="!manage">
						<uni-icons type="checkbox" size="20" :color="selectCol[i]?'red':''" @click="selected(i)"></uni-icons>	
					</view>
					<view id="list_tu">
						<image :src="'http://localhost:8888/getImg?sort='+v.img" mode=""></image>
					</view>
					<view class="list_text">
						<view class="">
							<text>{{v.name}}</text>
							<text>{{v.fzzl}}</text>
						</view>
						<view class="">
							<text>{{v.color}}</text>
							<text>{{v.size}}</text>
						</view>
					</view>
				</view>
				<view class="list_money">
					<text style="color: rgb(226,96,31);">￥{{v.spjg}}</text>
					<text>x{{v.goodnum}}</text>
				</view>	
			</view>	
		</view>
		<view class="footer">
			<view>
				共 <text style="color: rgb(226,96,31);">{{cartData.length}}</text> 件商品，合计：<text style="color: rgb(226,96,31);">￥{{cartMoney}}</text>
			</view>
			<view @click="goToCart">结算</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<addCart :addgood="addgood"></addCart>
		</uni-popup>
	</view>
</template>

<script>
	import http from '../../until/http';
	import {computed,reactive,toRefs,ref} from 'vue'

	export default {
		  setup(){
		  	let data=reactive({
				showEdit:false,
				manage:true,
				cartData:[],
				selectCol:[],
				edit_cart(){
					// 当前footer为删除
					if(String(data.selectCol).indexOf('true')!=-1){
						uni.showModal({
							title: '提示',
							content: '确认删除所选订单么？',
							success: function (res) {
								if (res.confirm) {
									let editData=[];
									for(let i=0;i<data.selectCol.length;i++){
										data.selectCol[i]&&editData.push(data.cartData[i].goodid)
									}
									http({
										url:'/goods/editcart',
										method:'post',
										data:editData
									}).then((res)=>{
										if(res.data.code==200){
											uni.showToast({
												title:'删除成功',
											});
											uni.navigateTo({
												url:'/pages/ShoppingCart/ShoppingCart'
											})
										}else{
											uni.showToast({
												title:'删除失败，请稍后再试',
												icon:'error'
											})
										}
									})
								}
							}
						});
					}else{
						uni.showToast({
							title:'请选择',
							icon:'error'
						})
					}
				},
				del(){
					uni.showToast({
						icon:'fail',
						position:'center'
					})
				},
				getCartData:()=>{
					http({
						url:'/goods/getcart'
					}).then((res)=>{
						data.cartData=res.data.data;
						data.cartData.forEach((item)=>{
							data.selectCol.push(false)
						})
					});
				},
				goToCart:()=>{
					uni.navigateTo({
						url:'/pages/spxq_wyc/pay_true'
					})
				}
		  	})
		  	return {...toRefs(data)}
		  },
		  mounted() {
		  	this.getCartData();
		  },
		  methods:{
			selected(i){
				this.selectCol[i]=!this.selectCol[i];
			},
			selectAllFn(){
				if(this.selectAll){
					for(let i=0;i<this.selectCol.length;i++){
						this.selectCol[i]=false;
					}
				}else{
					for(let i=0;i<this.selectCol.length;i++){
						this.selectCol[i]=true;
					}
				}
				console.log(this.selectCol)
			}  
		  },
		  computed:{
		  	cartMoney(){
		  		let money=0;
		  		this.cartData.forEach((item)=>{
		  			money+=item.goodnum*item.spjg;
		  		})
		  		return money
		  	},
			selectAll(){
				for(let i=0;i<this.selectCol.length;i++){
					if(!this.selectCol[i]){
						return false;
					}
				}
				return true;
			}
		  }
		}
</script>

<style scoped lang="less">
	.shop_cart{
		display: flex;
	position: relative;
		flex-direction: column;
		justify-content:space-between;
	}
	
.cart_nav{
	padding:20rpx;
	display: flex;
	justify-content: space-between;
}
.cart_body{
	margin-bottom: 100rpx;
}
.cart_list{
	border-top: 1px solid rgb(243,243,243);
	display: flex;
	justify-content: space-between;
	padding: 30rpx 20rpx;
}
.list_icon{
	padding-top: 30rpx;
}
#list_tu{
	width:154rpx;
	height: 154rpx;
	margin:0 20rpx;
}
image{
	width:100%;
	height:100%;
}
.list_data{
	display: flex;
	flex-direction: row;
}
.list_text{
	width:360rpx;
}
.list_text view:last-child{
	color: rgb(153,153,153);
}
.list_money{
	display: flex;
	flex-direction: column;
	text-align: right;
	padding-top:30rpx;
}
.list_text view:nth-child(2),
.list_money text:nth-child(2){
	color: rgb(153,153,153);
	font-size: 30rpx;
	margin-top: 30rpx;
}
.list_text>view:nth-child(2)>text:nth-child(2){
	margin: 0 20rpx;
}
.cart_footer{
	border-top: 1px solid rgb(243,243,243);
	text-align: right;
	height: 100rpx;
	display: flex;
	position: absolute;
	bottom: 0;
	right: 0;
	align-items:center;
}
.cart_footer view:nth-child(2){
	margin:0 20rpx;
}
.cart_footer view text{
	color: rgb(255,0,0);
}
.del_btn{
	border-radius: 0;
	width: 200rpx;
	height: 100rpx;
	line-height: 100rpx;
	color: white;
	background-color:rgb(255,0,0);
	margin: 0;
}
.footer{
		background-color: rgb(242,242,242);
		width: 750rpx;
		height: 80rpx;
		border: none;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content:flex-end;	
		align-items:center;
		view:first-child{
			font-size: 14px;
		}
		view:nth-child(2){
			height: 80rpx;
			width: 200rpx;
			background-color: rgb(226,96,31);
			text-align: center;
			line-height:80rpx ;
			margin-left: 30rpx;
			color: white;
		}
	}
</style>
